<template>
  <div style="margin-top: 20px">
    <ko-card title="Session Affinity">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-radio-group
            v-model="specObj.sessionAffinity"
            @change="onTypeChange(specObj.sessionAffinity)"
          >
            <div style="margin-top: 5px">
              <el-radio label="None">None</el-radio>
            </div>
            <div style="margin-top: 5px">
              <el-radio label="ClientIP">Client IP</el-radio>
            </div>
          </el-radio-group>
        </el-col>
        <div v-if="specObj.sessionAffinity === 'ClientIP'">
          <el-col :span="11">
            <div>Session Sticky Time</div>
            <el-input
              v-model.number="
                specObj.sessionAffinityConfig.clientIP.timeoutSeconds
              "
              @input="$forceUpdate()"
            >
              <template v-slot:append>Seconds</template>
            </el-input>
          </el-col>
        </div>
      </el-row>
    </ko-card>
  </div>
</template>

<script setup lang="ts">
import KoCard from "@/views/domain/kubeHud/views/components/ko-card/index.vue";
import { onMounted } from "vue";

const specObj = defineModel<any>("specObj");

const onTypeChange = (value: string) => {
  if (value === "ClientIP") {
    specObj.value.sessionAffinityConfig.clientIP.timeoutSeconds = 10800;
  } else {
    delete specObj.value.sessionAffinityConfig.clientIP.timeoutSeconds;
  }
};

onMounted(() => {
  if (!specObj.value?.sessionAffinityConfig) {
    specObj.value.sessionAffinity = "None";
    specObj.value.sessionAffinityConfig = {
      clientIP: {}
    };
  }
});
</script>

<style scoped></style>
